<template>
  <div>
    <el-container>
      <el-header height="25px">
        <div style="height:20px; font-size: 15px;background-color: rgba(205,205,205,0.2)">
          <div style="float: left; margin-left: 20px;"><div>业务模块 > 区域管理</div></div>
        </div>
      </el-header>
      <el-main style="max-height: 500px;overflow-y: auto;">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          accordion
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            style="margin-left: 20px"
            type="text"
            size="mini"
            @click="() => append(data)">
             添加下一级
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(data)">
              编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => isDelete(node, data)">
             删除
          </el-button>
        </span>
      </span>
        </el-tree>
      </el-main>
    </el-container>
    <el-dialog
      :before-close="handleClose"
      :title="title"
      :visible.sync="dialogVisible"
      style=" width: 1300px;min-width: 1200px">
      <div>
        <el-form :model="areaData" ref="area" :inline="true" label-width="85px">
          <el-form-item prop="parentId" label="上级id">
            <el-input disabled v-model="areaData.parentId"></el-input>
          </el-form-item>
          <el-form-item prop="parentName" label="上级名称：">
            <el-input disabled v-model="areaData.parentName"></el-input>
          </el-form-item>
          <el-form-item prop="areaId" label="区域id">
            <el-input disabled v-model="areaData.areaId"></el-input>
          </el-form-item>
          <el-form-item prop="level" label="区域级别：">
            <el-input disabled v-model="areaData.level"></el-input>
          </el-form-item>
          <el-form-item prop="areaName" label="区域名称：">
            <el-input v-model="areaData.areaName"></el-input>
          </el-form-item>
          <el-form-item prop="center" label="经纬度：">
            <el-input v-model="areaData.center"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel1()">取 消</el-button>
    <el-button type="primary" @click="confirm1()">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "areaModule",
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'areaName'
      },
      title: "",
      dialogVisible: false,
      areaData: {
        parentId: '',
        areaId: '',
        parentName: '',
        areaName: '',
        level: '',
        center: '',
      },
      addOrEdit: "",
    }
  },
  mounted() {
    this.getAreaTree()
  },
  methods: {
    getAreaTree() {
      this.$axios({
        url: "/area/getAreaTree",
        get: "get",
      }).then(res => {
        this.treeData = res.data.data
      })
    },
    append(data) {
      this.addOrEdit = "01"
      this.title = "添加区域";
      this.areaData.level = data.level + 1
      this.areaData.parentId = data.areaId
      this.areaData.parentName = data.areaName
      this.dialogVisible = true;
    },
    edit(data) {
      this.addOrEdit = "02"
      this.title = "修改区域";
      this.$axios({
        url: "/area/getAreaById",
        method: 'get',
        params: {
          id: data.areaId
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.areaData = res.data.data
          this.dialogVisible = true;
        } else {
          this.$message.error("系统故障，请联系管理员！")
        }
      })
    },
    isDelete(node, data) {

      this.$confirm('确认删除？')
        .then(_ => {
          this.remove(node, data)
        })
        .catch(_ => {
        });

    },
    remove(node, data) {
      if (node.childNodes.length > 0) {
        this.$message.error("该区域拥有下级区域，不能删除！")
      } else {
        this.$axios({
          url: "/area/deleteArea",
          method: "delete",
          data: {
            areaId: parseInt(data.areaId)
          }
        }).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.$message.success("删除成功！")
            this.getAreaTree()
          }
        })
      }
    },
    cancel1() {
      console.log(this.$refs.area)
      this.$refs.area.resetFields()
      this.dialogVisible = false
    },
    confirm1() {
      let url = ''
      if (this.addOrEdit === "01") {
        url = "/area/addArea"
      } else {
        url = "/area/editArea"
      }
      this.$axios({
        method: "post",
        url: url,
        data: {
          areaId: this.areaData.areaId,
          areaName: this.areaData.areaName,
          parentId: this.areaData.parentId,
          center: this.areaData.center,
          level: this.areaData.level,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.dialogVisible = false
          this.$refs['area'].resetFields()
          this.getAreaTree()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleClose() {
      this.$refs['area'].resetFields()
      this.dialogVisible = false
    },
  }
}
</script>

<style scoped>
.dialog-footer {
  align-content: center;
}
</style>
